<template>
  <view class="detail-box">
    <UserInfo :detail="detailObj" />
    <u-divider>内容</u-divider>
    <u-parse
      class="linefeed"
      :html="HtmlUtil.htmlDecodeByRegExp(detailObj.content || '')"
    ></u-parse>
    <u-divider>评论</u-divider>
    <Comment :detail="detailObj" />
    <u-back-top :scrollTop="scrollTop" mode="square" :icon-style="iconStyle" />
    <u-divider>到底了</u-divider>
    <AddComment :replyId="replyId" @getDataFn="getDataFn" />
  </view>
</template>

<script>
import { getDetail } from "@/api/detail.js";
import UserInfo from "./components/user-info.vue";
import Comment from "./components/comment.vue";
import AddComment from "./components/addComment.vue";
import { HtmlUtil } from "@/utils/tool";
export default {
  data() {
    return {
      detailObj: {},
      scrollTop: 0,
      iconStyle: {
        fontSize: "32rpx",
        color: "#2979ff",
      },
      replyId: "",
      HtmlUtil,
    };
  },
  components: {
    UserInfo,
    Comment,
    AddComment,
  },
  // 上下滚动事件
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onLoad(option) {
    this.replyId = option.id;
    this.getDataFn(option.id);
  },
  methods: {
    getDataFn(id) {
      getDetail(id).then((res) => {
        uni.setNavigationBarTitle({ title: res.data.title });
        this.detailObj = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-box {
  padding: 20rpx 40rpx 150rpx 40rpx;
  font-size: 28rpx;
  line-height: 50rpx;
}
</style>